//     检验员及时性
import { SearchOutlined, RedoOutlined } from '@ant-design/icons';
import { Button, Form, Input, Table, DatePicker, Pagination } from 'antd';
import type { ColumnsType } from 'antd/lib/table';
import { FC, useState } from 'react';
import './index.css'
import axios from '../../../utils/axios'
interface DataType {
  userId: string;  //序号
  instCompleteBatchNumber: string;  //姓名
  instCompletionRate: string;  //检验总批数
  instOnTimeCompleteBatchNumber: string;  //完成批数
  instOnTimeRate: string;  //完成率
  total: string;//按时完成批数
  materialCombinationId: string;//按时率
  qualified: string;//合格
  generally: string;//让步接受
  returned: string;//退货
  review: string;//评审
}
const { RangePicker } = DatePicker;

const PerformanceManagement: FC = () => {
  const [dataList, setDataList] = useState([])
  // 查询和重置按钮
  const TheQuery = () => {
    console.log(123);
  }
  const reset = () => {
    console.log(333);
  }
  // 导出
  const showModal = () => { };
  // --------------------
  const [form] = Form.useForm();
  //table表格数据
  axios({
    url: "/api3/inspectorTimeliness/selectInspectorTimeliness",
    method: "get",
  })
    .then((data) => setDataList(data.data.data.ListInspectorTimeliness))
    .catch((error) => console.log(error));
  const columns: ColumnsType<DataType> = [
    {
      title: '序号',
      dataIndex: 'userId',
      key: 'userId'
    },
    {
      title: '姓名',
      dataIndex: 'instCompleteBatchNumber',
      align: 'center',
      key: 'instCompleteBatchNumber'
    },
    {
      title: '检验总批数',
      dataIndex: 'instCompletionRate',
      align: 'center',
      key: 'instCompletionRate'
    },
    {
      title: '完成批数',
      dataIndex: 'instOnTimeCompleteBatchNumber',
      key: 'instOnTimeCompleteBatchNumber'
    },
    {
      title: '完成率',
      dataIndex: 'instOnTimeRate',
      key: 'instOnTimeRate'
    },
    {
      title: '退按时完成批数货',
      dataIndex: 'total',
      key: 'total'
    },
    {
      title: '按时率',
      dataIndex: 'materialCombinationId',
      key: 'materialCombinationId'
    },
    {
      title: '合格',
      dataIndex: 'qualified',
      key: 'qualified'
    },
    {
      title: '让步接受',
      dataIndex: 'generally',
      key: 'generally'
    },
    {
      title: '退货',
      dataIndex: 'returned',
      key: 'returned'
    },
    {
      title: '评审',
      dataIndex: 'review',
      key: 'review'
    },
  ];

  const data: DataType[] = [
    // {
    //   key: '1',
    //   SupplierCode: '姓名1',
    //   TotalNumber:'334',
    //   Complete: "332",
    //   completion: '95.2%',
    //   CompleteBatches:'300' ,
    //   Rate: '80%',
    //   qualified:'318',
    //   Concessions:'14',
    //   Return:'2',
    //   review:'0'
    // },
    // {
    //   key: '2',
    //   SupplierCode: '姓名2',
    //   TotalNumber:'334',
    //   Complete: "332",
    //   completion: '95.2%',
    //   CompleteBatches:'300' ,
    //   Rate: '60%',
    //   qualified:'135',
    //   Concessions:'14',
    //   Return:'2',
    //   review:'0'
    // },
    // {
    //   key: '3',
    //   SupplierCode: '姓名3',
    //   TotalNumber:'334',
    //   Complete: "332",
    //   completion: '95.2%',
    //   CompleteBatches:'300' ,
    //   Rate: '70%',
    //   qualified:'225',
    //   Concessions:'14',
    //   Return:'1',
    //   review:'0'
    // },
  ];


  const { TextArea } = Input
  return (<div>
    <Form form={form} layout="inline" className='btnStyel'>
      <Form.Item >时间：<RangePicker /></Form.Item>
      <Form.Item >供应商简称:<Input className='inp' /></Form.Item>
      <Form.Item><Button icon={<SearchOutlined />} style={{ borderColor: 'rgb(2,167,240)', color: 'rgb(2,167,240)' }} onClick={TheQuery}>查询</Button></Form.Item>
      <Form.Item><Button icon={<RedoOutlined />} style={{ borderColor: 'rgb(245,154,35)', color: 'rgb(245,154,35)' }} onClick={reset}>重置</Button></Form.Item>
    </Form>
    <div><Button style={{ margin: '0.3rem' }} type="primary" onClick={showModal}>+导出</Button></div>
    <Table
      columns={columns}
      bordered
      dataSource={dataList}
      rowKey={(record) => record.instCompletionRate}
    />
    {/* 分页 */}
    <Pagination
      total={85}
      showSizeChanger
      showQuickJumper
      showTotal={total => `总共 ${total}页`}
    />
  </div>

  );
};
export default PerformanceManagement

